<template>
      <div class="icons">
            <swiper :options="swiperOption">
                  <swiper-slide v-for="(page, index) of pages" :key="index">
                        <div class="icon"
                             v-for="item of page"
                             :key="item.id"
                        >
                              <div class="icon-img">
                                    <img class="icon-img-content" :src="item.imgUrl"/>
                              </div>
                              <p class="icon-desc">{{item.desc}}</p>
                        </div>
                  </swiper-slide>
            </swiper>
      </div>
</template>

<script>
    export default {
        name: "HomeIcons",
        props:{
          list:Array
        },
        data () {
          return {
        swiperOption:{
          autoplay:false//取消自动轮播翻页
        }
          }
        },
     /* data (){
          return{
            iconList:[{
              id:'001',
              imgUrl:'https://img1.qunarzz.com/qs/1903/5a/b2a2b1fcd2300b02.jpg',
              desc:'景点门票'
            },{
              id:'002',
              imgUrl:'https://img1.qunarzz.com/qs/1904/a0/75281a48c0be5502.jpg',
              desc:'游轮季'
            },{
              id:'003',
              imgUrl:'https://img1.qunarzz.com/qs/1904/d7/fbeda075c399d002.jpg',
              desc:'五一长假'
            },{
              id:'004',
              imgUrl:'https://img1.qunarzz.com/qs/1904/a0/75281a48c0be5502.jpg',
              desc:'住酒店'
            },{
              id:'005',
              imgUrl:'https://img1.qunarzz.com/qs/1903/5a/b2a2b1fcd2300b02.jpg',
              desc:'景点门票'
            },{
              id:'006',
              imgUrl:'https://img1.qunarzz.com/qs/1904/a0/75281a48c0be5502.jpg',
              desc:'游轮季'
            },{
              id:'007',
              imgUrl:'https://img1.qunarzz.com/qs/1904/d7/fbeda075c399d002.jpg',
              desc:'五一长假'
            },{
              id:'008',
              imgUrl:'https://img1.qunarzz.com/qs/1904/a0/75281a48c0be5502.jpg',
              desc:'住酒店'
            },{
              id:'009',
              imgUrl:'https://img1.qunarzz.com/qs/1904/a0/75281a48c0be5502.jpg',
              desc:'游轮季'
            }]
          }
      },*/
      computed:{
          pages (){
            const pages=[]
            this.list.forEach((item, index)=>{
              const page=Math.floor(index/8)//向下取整
              if(!pages[page]){
                pages[page]=[]
              }
              pages[page].push(item)
            })
            return pages
          }

      }
    }
</script>

<style lang="stylus" scoped>
      @import "../assets/styles/varibles.styl"
      @import "../assets/styles/mixins.styl"
      .icons >>> .swiper-container
        height 0
        padding-bottom 50%
      .icons
        margin-top .1rem
        .icon
          position relative
          overflow hidden
          float left
          width 25%
          height 0
          padding-bottom 25%

          .icon-img
            position absolute
            top 0
            left 0
            right 0
            bottom .44rem
            box-sizing border-box
            padding .1rem

            .icon-img-content
              display block
              margin 0 auto
              height 100%
          .icon-desc
            position absolute
            left 0
            right 0
            bottom 0
            height .44rem
            line-height .44rem
            text-align center
            color $darkTextColor
            ellipse()
</style>